<template>
  <header
    class="home-header"
    :class="[isTransBg ? 'tran-bg-header' : '',isStudyCenter?'homeHeaderHeight':'']"
    :style="cssVars"
  >
    <div
      class="header-container flex-space-be w1200"
      :style="`width:${width / 192}rem`"
    >
      <div class="header-left">
        <div class="mr10 logo click" v-if="showLogo" @click="goStudent">
          <!-- <img src="../../assets/img/logo.png" alt="" /> -->
          <!-- logo-across -->
          <!-- <img src="../assets/img/logo-header.png" alt="" /> -->
          <img v-if="isStudyCenter" class="logo_svg" src="../assets/img/logo-01.svg" alt="" />
          <img v-else class="logo_svg_white" src="../assets/img/study-index/header-logo.png" alt="" />
          <!-- <img v-else class="logo_svg_white" src="../assets/img/study-index/header-logo-white.svg" alt="" /> -->
          <el-divider v-if="isStudyCenter" direction="vertical"></el-divider>
        </div>
        <slot name="left">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="item in breadcrumbList"
              :key="item.name"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </slot>
      </div>
      <div class="header-center">
        <slot name="center"></slot>
      </div>
      <div class="header-right btn-box index-user">
        <slot name="right"></slot>
        <div v-if="isGoBack" class="btn" @click="goStudyIndex">
          返回学习中心
        </div>
      </div>
    </div>
  </header>
</template>
<script>
export default {
  props: {
    isStudyCenter:{
      type:Boolean,
      default:false
    },
    width: {
      type: Number,
      default: 1200,
    },
    isGoBack: {
      type: Boolean,
      default: true,
    },
    isTransBg: {
      type: Boolean,
      default: false,
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    backQuery: {
      typeObject: Object,
    },
  },
  computed: {
    breadcrumbList() {
      return this.$route.matched.slice(0, 3).filter((item) => {
        return item.name != "home";
      });
    },
    cssVars() {
      return {
        "--width": this.width,
      };
    },
  },
  methods: {
    goStudent() {
      let url = window.location.origin;
      // if (url.match(RegExp(/xiaoguobx/g))) {
      //   url = window.location.origin + "/student/";
      // } else {
      //   url = window.location.origin + "/student/";
      // }
      url = window.location.origin + "/student/";
      window.location.href = url;
    },
    goStudyIndex() {
      console.log(this.$route);
      if (this.$route.matched[this.$route.matched.length - 2]) {
        this.$router.push({
          name: this.$route.matched[this.$route.matched.length - 2].name,
          query: this.backQuery,
        });
      } else {
        this.$router.push({
          name: "studyIndex",
          query: this.backQuery,
        });
      }
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.logo_svg {
  height: 60px;
}
.logo_svg_white {
  height: 50px;
  margin-right: 28px;
}
 /deep/.el-divider--vertical {
      height: 60px;
    }
// .header-container{
//   width: var(--width px) !important;
// }</style
>>
